/*
 *@Description: 面板分割，拖拽调整高度
 *@MethodAuthor:  LAIKANGYI
 *@Date: 2021-07-27 13:14:34
*/
// 当前为横向table 多行排列拖拽

// 插件相关DOM命名
// 1、box随意 (#dragtab-box)
// 2、table的外层div class为 dragtab-table1、dragtab-table2...
// 3、table与table中间的控制条class为 dragtab-module1、dragtab-module2....

// 绑定动作
function tableMove({ event, length, boxId, type, dargNum }) {
  // 是否生成模拟dom
  const domList = type === 2 ? creatDom({ length, boxId, type, dargNum }) : '';

  const boxDom = document.querySelector(boxId); // 盒子dom
  const tableH = { }; // 模块移动值
  const intY = event.clientY;

  // 获取当前拖拽上下2块dom。
  const table1 = boxDom.querySelector(`.dragtab-table${dargNum}`);
  const table2 = boxDom.querySelector(`.dragtab-table${dargNum + 1}`);
  const table1_h = table1.offsetHeight;
  const table2_h = table2.offsetHeight;

  document.onmousemove = (ele) => {
    document.getElementsByTagName('body')[0].classList.add('noselect'); // 拖的时候禁止选择内容

    // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
    // const left = event.clientX - intX;
    const top = ele.clientY - intY;
    const skewtop = parseInt(top);
    if (skewtop > 0) {
      tableH.htxt1 = ` + ${Math.abs(skewtop)}px`;
      tableH.htxt2 = ` - ${Math.abs(skewtop)}px`;
    } else {
      tableH.htxt1 = ` - ${Math.abs(skewtop)}px`;
      tableH.htxt2 = ` + ${Math.abs(skewtop)}px`;
    }

    // 立刻生效
    if (type === 1) {
      table1.style.height = `calc(${table1_h}px${tableH.htxt1})`;
      table2.style.height = `calc(${table2_h}px${tableH.htxt2})`;
    }
    // 模拟dom立即生效
    if (type === 2) {
      domList[0].style.height = `calc(${table1_h}px${tableH.htxt1})`;
      domList[1].style.height = `calc(${table2_h}px${tableH.htxt2})`;
      domList[1].style.top = `calc(${table2.offsetTop}px${tableH.htxt1})`;
    }
  };
  document.onmouseup = () => {
    document.getElementsByTagName('body')[0].classList.remove('noselect');
    document.onmousemove = null;
    document.onmouseup = null;

    // 松开后生效
    if (type === 2) {
      domList[0].style.display = 'none';
      domList[1].style.display = 'none';
      table1.style.height = `calc(${table1_h}px${tableH.htxt1})`;
      table2.style.height = `calc(${table2_h}px${tableH.htxt2})`;
    }
  };
}
// 创建模拟dom
function creatDom({ length, boxId, type, dargNum }) {
  const boxDom = document.querySelector(boxId); // 盒子dom

  const dom_t = boxDom.querySelector(`.dragtab-virtual${dargNum}`);
  let dom_b = '';
  // 开头dom已存在，直接修改样式显示
  if (dom_t) {
    dom_b = boxDom.querySelector(`.dragtab-virtual${dargNum + 1}`);
    dom_t.style.display = 'block';
    dom_b.style.display = 'block';

    console.log([dom_t, dom_b]);
    return [dom_t, dom_b];
  }

  // 修改bos为相对定位
  boxDom.style.position = 'relative';

  const domJh = [];
  const VirtualDoms = 'dragtab-virtual';
  for (let i = 1; i <= length; i++) {
    // 创建对应数量的模拟dom
    const tabDom = document.createElement('div');
    tabDom.classList.add(`${VirtualDoms}${i}`);

    // 对应的实际dom
    const realDom = boxDom.querySelector(`.dragtab-table${i}`);

    tabDom.style.cssText = `width:100%; height: ${realDom.offsetHeight}px; position: absolute; left:0; top: ${realDom.offsetTop}px; box-shadow: rgb(0 0 0 / 50%) 0px 0px 10px; display:none;`;
    domJh.push(tabDom);
    boxDom.append(tabDom);
  }
  // 创建所有模拟dom后，自调一次，对当前操作的进行展示
  return creatDom({ length, boxId, type, dargNum });
}


/*
 *@Description: 绑定down事件
 *@MethodAuthor:  LAIKANGYI
 *@Date: 2021-07-28 10:46:12
 *@param:
  num      String   几块table, 2块，3块
  boxid    String   盒子id
  type     Number   效果类型，1实时拖拽，2模拟拖拽结束后生效
  heights  Array    table高度， 百分比或px
*/
function splitDrag({ length = 2, boxId, type = 1 }) {
  let md = function () {};
  for (let i = 1; i < length; i++) {
    // addEventListener 不支持自定义参数传递，中转一下方法带入参数
    md = function (event) {
      tableMove({
        event,
        length,
        boxId,
        type,
        dargNum: i,
      });
    };
    // 获取i块，可拖拽模块。
    document.querySelector(boxId).querySelector(`.dragtab-module${i}`).addEventListener('mousedown', md);
  }
}

export default splitDrag;
